<template>
  <view class="content">
    <canvas type="webgl2" id="canvas"/>
  </view>
</template>

<script setup>
  import * as THREE from 'three';
  import { adapter } from '@minisheep/three-platform-adapter'; 

  adapter.useCanvas('#canvas').then(({ canvas, requestAnimationFrame }) => {  
    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth/canvas.clientHeight, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer({ canvas }); 
    renderer.setSize(canvas.clientWidth, canvas.clientHeight); 

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    }

    animate();
  }); 
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
